<template>
    <el-dialog v-if="dialogVisible" :close-on-click-modal='false' title="编辑规则组" :visible.sync="dialogVisible" @close="resetForm('editRuleGroupForm')" width="1200px">
        <div class="over_box">
            <el-form label-position='left' label-width="90px" size="small" :model="editRuleGroupForm" :hide-required-asterisk='true' ref="editRuleGroupForm" :rules="editRuleGroupRules" class="add_form">
                <el-form-item label="规则组名称" prop="group_name">
                    <el-input v-model="editRuleGroupForm.group_name" placeholder="设置规则组名称" style="width:260px"></el-input>
                </el-form-item>
                <el-form-item label="重启roi" prop="call_back_roi">
                    <el-input v-model="editRuleGroupForm.call_back_roi" placeholder="请输入" style="width:120px"></el-input>
                </el-form-item>
                <el-form-item label="规则设置" prop="">
                    <div class="rule_box">
                        <div class="rule_title">设置条件</div>
                        <div class="cod_item flexbox flexcenter" v-for="(item,index) in editRuleGroupForm.condition" :key="index">
                            <span class="cod_tag">条件{{index+1}}</span>
                            <span class="cod_text font_14 color_01 ml_12">消耗</span>
                            <el-form-item label="" :prop="`condition.${index}.cost_left`" :rules="editRuleGroupRules.group" class="ml_12">
                                <el-input v-model="item.cost_left" placeholder="请输入" style="width:120px"></el-input>
                            </el-form-item>
                            <span class="cod_text font_14 color_01 ml_12">-</span>
                            <el-form-item label="" :prop="`condition.${index}.cost_right`" :rules="editRuleGroupRules.group" class="ml_12">
                                <el-input v-model="item.cost_right" placeholder="请输入" style="width:120px"></el-input>
                            </el-form-item>
                            <span class="cod_text font_14 color_01 ml_12">roi</span>
                            <el-form-item label="" :prop="`condition.${index}.roi_left`" :rules="editRuleGroupRules.group" class="ml_12">
                                <el-input v-model="item.roi_left" placeholder="请输入" style="width:120px"></el-input>
                            </el-form-item>
                            <span class="cod_text font_14 color_01 ml_12">-</span>
                            <el-form-item label="" :prop="`condition.${index}.roi_right`" :rules="editRuleGroupRules.group" class="ml_12">
                                <el-input v-model="item.roi_right" placeholder="请输入" style="width:120px"></el-input>
                            </el-form-item>
                            <div class="icon_btn ml_12" v-if="editRuleGroupForm.condition.length>1"><img src="../../assets/img/del_icon2.svg" alt="" @click="deletCondition(index)"></div>
                        </div>
                        <el-link type="primary" :underline="false" class="mt_5" @click="addCondition">添加条件</el-link>
                        <div class="divider_line"></div>
                        <div class="rule_title">触发操作</div>
                        <div class="oper_item flexbox flexcenter" v-for="(item,index) in editRuleGroupForm.operation" :key="index">
                            <span class="cod_text font_14 color_01 mt_12">如果满足</span>
                            <el-form-item label="" :prop="`operation.${index}.condition`" :rules="editRuleGroupRules.group" class="ml_12 mt_12">
                                <el-select v-model="item.condition" placeholder="条件" style="width:120px">
                                    <el-option :label="'条件'+(index+1)" :value="index" v-for="(item,index) in editRuleGroupForm.condition" :key="index"></el-option>
                                </el-select>
                            </el-form-item>
                            <template v-if="item.operation_type==0">
                                <span class="cod_text font_14 color_01 ml_12 mt_12">且10分钟消耗</span>
                                <el-form-item label="" :prop="`operation.${index}.speed_left`" :rules="editRuleGroupRules.group" class="ml_12 mt_12">
                                    <el-input v-model="item.speed_left" placeholder="请输入" style="width:120px"></el-input>
                                </el-form-item>
                                <span class="cod_text font_14 color_01 ml_12 mt_12">-</span>
                                <el-form-item label="" :prop="`operation.${index}.speed_right`" :rules="editRuleGroupRules.group" class="ml_12 mt_12">
                                    <el-input v-model="item.speed_right" placeholder="请输入" style="width:120px"></el-input>
                                </el-form-item>
                                <span class="cod_text font_14 color_01 ml_12 mt_12">roi</span>
                                <el-form-item label="" :prop="`operation.${index}.roi_left`" :rules="editRuleGroupRules.group" class="ml_12 mt_12">
                                    <el-input v-model="item.roi_left" placeholder="请输入" style="width:120px"></el-input>
                                </el-form-item>
                                <span class="cod_text font_14 color_01 ml_12 mt_12">-</span>
                                <el-form-item label="" :prop="`operation.${index}.roi_right`" :rules="editRuleGroupRules.group" class="ml_12 mt_12" style="margin-right:80px">
                                    <el-input v-model="item.roi_right" placeholder="请输入" style="width:120px"></el-input>
                                </el-form-item>
                            </template>
                            <template v-if="item.operation_type==1">
                                <span class="cod_text font_14 color_01 ml_12 mt_12">消耗/预算</span>
                                <el-form-item label="" :prop="`operation.${index}.trigger_float`" :rules="editRuleGroupRules.group" class="ml_12 mt_12">
                                    <el-input v-model="item.trigger_float" placeholder="请输入" style="width:120px">
                                        <i slot="suffix" style="font-style:normal;color:#17233D;margin-right:5px">%</i>
                                    </el-input>
                                </el-form-item>
                            </template>
                            <template v-if="item.operation_type==2">
                                <span class="cod_text font_14 color_01 ml_12 mt_12">且10分钟消耗</span>
                                <el-form-item label="" :prop="`operation.${index}.speed_left`" :rules="editRuleGroupRules.group" class="ml_12 mt_12">
                                    <el-input v-model="item.speed_left" placeholder="请输入" style="width:120px"></el-input>
                                </el-form-item>
                                <span class="cod_text font_14 color_01 ml_12 mt_12">-</span>
                                <el-form-item label="" :prop="`operation.${index}.speed_right`" :rules="editRuleGroupRules.group" class="ml_12 mt_12">
                                    <el-input v-model="item.speed_right" placeholder="请输入" style="width:120px"></el-input>
                                </el-form-item>
                            </template>

                            <span class="cod_text font_14 color_01 ml_12 mt_12">则触发</span>
                            <el-form-item label="" :prop="`operation.${index}.operation_type`" :rules="editRuleGroupRules.group" class="ml_12 mt_12">
                                <el-select v-model="item.operation_type" placeholder="条件" style="width:120px">
                                    <el-option label="关停" :value="0"></el-option>
                                    <el-option label="调预算" :value="1"></el-option>
                                    <el-option label="改出价" :value="2"></el-option>
                                </el-select>
                            </el-form-item>
                            <template v-if="item.operation_type==1">
                                <span class="cod_text font_14 color_01 ml_12 mt_12">上调</span>
                                <el-form-item label="" :prop="`operation.${index}.trigger`" :rules="editRuleGroupRules.group" class="ml_12 mt_12">
                                    <el-input v-model="item.trigger" placeholder="请输入" style="width:120px">
                                        <i slot="prefix" style="font-style:normal;color:#17233D;margin-left:5px">￥</i>
                                    </el-input>
                                </el-form-item>
                            </template>
                            <template v-if="item.operation_type==2">
                                <el-form-item label="" :prop="`operation.${index}.percentage`" :rules="editRuleGroupRules.group" class="ml_12 mt_12" style="margin-right:80px">
                                    <el-input v-model="item.percentage" placeholder="请输入" style="width:120px">
                                        <i slot="suffix" style="font-style:normal;color:#17233D;margin-right:5px">%</i>
                                    </el-input>
                                </el-form-item>
                                <span class="cod_text font_14 color_01 mt_12">触发频率</span>
                                <el-form-item label="" :prop="`operation.${index}.after_time`" :rules="editRuleGroupRules.group" class="ml_12 mt_12">
                                    <el-select v-model="item.after_time" placeholder="条件" style="width:120px">
                                        <!-- <el-option label="每30分钟" value="30"></el-option> -->
                                        <!-- <el-option label="每60分钟" value="60"></el-option> -->
                                        <el-option label="每90分钟" value="90"></el-option>
                                        <el-option label="每180分钟" value="180"></el-option>
                                    </el-select>
                                </el-form-item>
                                <span class="cod_text font_14 color_01 ml_12 mt_12">出价限制</span>
                                <el-form-item label="" :prop="`operation.${index}.price_left`" :rules="editRuleGroupRules.group" class="ml_12 mt_12">
                                    <el-input v-model="item.price_left" placeholder="最小值" style="width:120px">
                                        <i slot="prefix" style="font-style:normal;color:#17233D;margin-left:5px">￥</i>
                                    </el-input>
                                </el-form-item>
                                <span class="cod_text font_14 color_01 ml_12 mt_12">-</span>
                                <el-form-item label="" :prop="`operation.${index}.price_right`" :rules="editRuleGroupRules.group" class="ml_12 mt_12">
                                    <el-input v-model="item.price_right" placeholder="最大值" style="width:120px">
                                        <i slot="prefix" style="font-style:normal;color:#17233D;margin-left:5px">￥</i>
                                    </el-input>
                                </el-form-item>
                            </template>
                            <div class="icon_btn ml_12 mt_12" v-if="editRuleGroupForm.operation.length>1"><img src="../../assets/img/del_icon2.svg" alt="" @click="deletOperation(index)"></div>
                        </div>
                        <el-link type="primary" :underline="false" class="mt_5" @click="addOperation">添加操作</el-link>
                    </div>
                </el-form-item>
            </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="resetForm('editRuleGroupForm')" class="el-button-width">取 消</el-button>
            <el-button size="small" type="primary" @click="submitForm('editRuleGroupForm')" :loading="loading" class="el-button-width">保 存</el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            loading: false,
            dialogVisible: false,
            index:null,
            type:null,
            editRuleGroupForm: {
                group_name: "",
                call_back_roi: "",
                condition: [
                    {
                        roi_left: "",
                        roi_right: "",
                        cost_right: "",
                        cost_left: "",
                    },
                ],
                operation: [
                    {
                        condition: 0,
                        operation_type: 0,
                        speed_left: "",
                        speed_right: "",
                        roi_left: "",
                        roi_right: "",
                        trigger_float: "",
                        trigger: "",
                        percentage: "",
                        price_left: "",
                        price_right: "",
                        after_time: "90",
                    },
                ],
            },

            editRuleGroupRules: {
                group_name: [
                    {
                        required: true,
                        message: "请输入规则组名称",
                        trigger: ["blur", "change"],
                    },
                ],
                call_back_roi: [
                    {
                        required: true,
                        message: "请输入重启roi",
                        trigger: ["blur", "change"],
                    },
                ],
                group: [
                    {
                        required: true,
                        message: "请输入",
                        trigger: ["blur", "change"],
                    },
                    {
                        pattern:/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
                        required: true,
                        message: "请输入正确数值",
                        trigger: ["blur", "change"],
                    },
                ],
            },
        };
    },
    created() {
        this.$bus.on("editRuleGroup", (value) => {
            this.dialogVisible = value.dialogVsb;
            this.editRuleGroupForm = JSON.parse(JSON.stringify(value.row))
            this.index = value.index
            this.type = value.type
        });
    },
    methods: {
        // 关闭重置表单
        resetForm(formName) {
            // this.$refs[formName].resetFields();
            this.editRuleGroupForm = {
                group_name: "",
                call_back_roi: "",
                condition: [
                    {
                        roi_left: "",
                        roi_right: "",
                        cost_right: "",
                        cost_left: "",
                    },
                ],
                operation: [
                    {
                        condition: 0,
                        operation_type: 0,
                        speed_left: "",
                        speed_right: "",
                        roi_left: "",
                        roi_right: "",
                        trigger_float: "",
                        trigger: "",
                        percentage: "",
                        price_left: "",
                        price_right: "",
                        after_time: "90",
                    },
                ],
            }
            this.dialogVisible = false;
        },

        // 添加条件
        addCondition() {
            this.editRuleGroupForm.condition.push({
                roi_left: "",
                roi_right: "",
                cost_right: "",
                cost_left: "",
            });
        },

        // 删除条件
        deletCondition(index) {
            for(let i in this.editRuleGroupForm.operation){
                if(this.editRuleGroupForm.operation[i].condition==index){
                    this.editRuleGroupForm.operation[i].condition = ''
                }
            }
            this.editRuleGroupForm.condition.splice(index, 1);
        },

        // 添加操作
        addOperation() {
            this.editRuleGroupForm.operation.push({
                condition: 0,
                operation_type: 0,
                speed_left: "",
                speed_right: "",
                roi_left: "",
                roi_right: "",
                trigger_float: "",
                trigger: "",
                percentage: "",
                price_left: "",
                price_right: "",
                after_time: "90",
            });
        },

        // 删除操作
        deletOperation(index) {
            this.editRuleGroupForm.operation.splice(index, 1);
        },

        // 提交添加
        submitForm(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    this.$parent.addStrategyForm.rule_group_id[this.index] = this.editRuleGroupForm
                    this.$parent.$forceUpdate();
                    if(this.type ==1){
                        this.$parent.setSessionStorage()
                    }
                    this.resetForm('editRuleGroupForm')
                } else {
                    return false;
                }
            });
        },
    },
    components: {},
};
</script>


<style scoped>
.over_box {
    max-height: 670px;
}
</style>
